<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '民宿图片',
    // enablePullDownRefresh: true,
  },
}
</route>

<template>
  <div class="photo-page">
    <div class="photo-list" v-if="imgUrls.length > 0">
      <image
        v-for="(item, index) in imgUrls"
        :key="index"
        :src="item"
        mode="widthFix"
        @click="previewImage(0, [item])"
      />
    </div>
    <Seat v-if="!loading && imgUrls.length === 0" :loading="loading" />
  </div>
</template>

<script lang="ts" setup>
import { previewImage } from '@/utils/index'

let id = null
onLoad((query) => {
  if (query.id) {
    id = query.id
    getData()
  }
})

const loading = ref(false)
const imgUrls = ref([])
function getData() {
  if (id) {
    uni.showLoading()
    loading.value = true
    http
      .get('/hotels-info-app/open/detail', {
        id,
      })
      .then((res: any) => {
        if (res.imgUrls) {
          imgUrls.value = res.imgUrls.split(',')
        }
      })
      .finally(() => {
        uni.hideLoading()
        loading.value = false
      })
  }
}
</script>

<style lang="scss" scoped>
.photo-page {
  box-sizing: border-box;
  min-height: 100vh;
  background-color: var(--bgc4);

  .photo-list {
    box-sizing: border-box;
    column-gap: 26rpx;
    padding: 26rpx 30rpx;

    // 瀑布流布局
    column-count: 2;
    // 解决内容被截断问题
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    image {
      width: 330rpx;
      margin-bottom: 26rpx;
      border-radius: 16rpx;
      -webkit-column-break-inside: avoid;
      break-inside: avoid;
    }
  }
}
</style>
